<template>
  <div class="wrap">
    <search-head></search-head>
    <div class="content">
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="地区"
        placeholder="请选择所在地区"
        @click="show = true"
      />
      <van-popup v-model="show" round position="bottom" class="area_popup">
        <van-cascader
          v-model="area"
          active-color="#1989fa"
          title="请选择所在地区"
          :options="options"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>
    </div>
    <div class="service-provider">
      <span class="service-provider-prompt fmt-text-light"
        >本服务由咸宁市民政局提供</span>
    </div>
  </div>
</template>

<script>
import SearchHead from "@/components/SearchHead.vue";

export default {
  name: "Test",
  components: {
    SearchHead,
  },
  data() {
    return {
      options: [
        {text:"杭州",value:'杭州'}, 
        {text:"宁波",value:'宁波'}, 
        {text:"温州",value:'温州'},
        {text:"绍兴",value:'绍兴'}, 
        {text:"湖州",value:'湖州'}, 
        {text:"嘉兴",value:'嘉兴'},
        {text:"金华",value:'金华'}, 
        {text:"衢州",value:'衢州'}
          ],
      area:'',
      show: false,
      fieldValue:'',
      cascaderValue:''
    };
  },
  methods: {
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('');
    },

  },
};
</script>

<style lang='less'>
.wrap{
  background-color: #eee;
  .area_popup{
    height: 350px;
  }
}
.service-provider {
  width: 100%;
  text-align: center;
  background-color: white;
  padding: 3.125rem 0 2.5rem;
  margin-top: auto;
}
.service-provider-prompt {
  display: block;
}
</style>